// /**
////  * Magento
//  *
//  * NOTICE OF LICENSE
//  *
//  * This source file is subject to the Academic Free License (AFL 3.0)
//  * that is bundled with this package in the file LICENSE_AFL.txt.
//  * It is also available through the world-wide-web at this URL:
//  * http://opensource.org/licenses/afl-3.0.php
//  * If you did not receive a copy of the license and are unable to
//  * obtain it through the world-wide-web, please send an email
//  * to license@magentocommerce.com so we can send you a copy immediately.
//  *
//  * DISCLAIMER
//  *
//  * Do not edit or add to this file if you wish to upgrade Magento to newer
//  * versions in the future. If you wish to customize Magento for your
//  * needs please refer to http://www.magentocommerce.com for more information.
// *
// * @category design
// * @copyright Copyright (c) 2014 X.commerce, Inc. (http://www.magentocommerce.com)
// * @license http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
// */

//  # Layout
//
//  Magento UI library provides mixins for flexible page layout customization. For simple quick layout customization global layout variables are used.

header.header {
    background-color: rgba(255, 0, 0, 0.2);
}
.column.main {
    background-color: rgba(255, 255, 0, 0.2);
}
.column.left {
    background-color: rgba(0, 255, 255, 0.2);
}
.column.right {
    background-color: rgba(0, 0, 255, 0.2);
}
footer.footer {
    background-color: rgba(0, 0, 0, 0.2);
}

//  # Layout global variables
//
//  <pre>
//    <table>
//        <tr>
//            <th class="vars_head">Variables list names</th>
//            <th class="vars_head">Default value</th>
//            <th class="vars_head">Comment</th>
//        </tr>
//        <tr>
//            <th>@layout-min-width</th>
//            <td class="vars_value">1000px</td>
//            <td>Page minimum width</td>
//        </tr>
//        <tr>
//            <th>@layout-max-width</th>
//            <td class="vars_value">1280px</td>
//            <td>Page maximum width</td>
//        </tr>
//        <tr>
//            <th>@layout-indent</th>
//            <td class="vars_value">20px</td>
//            <td>Page indents on the left and right</td>
//        </tr>
//        <tr>
//            <th colspan="3" class="vars_section">Class names defining different layouts</th>
//        </tr>
//        <tr>
//            <th>@layout-class-1column</th>
//            <td class="vars_value">layout-1</td>
//            <td>Class name for one column layout</td>
//        </tr>
//        <tr>
//            <th>@layout-class-2columns-left</th>
//            <td class="vars_value">layout-2-left</td>
//            <td>Class name for two columns layout with left sidebar</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@layout-class-2columns-right</th>
//            <td class="vars_value">layout-2-right</td>
//            <td>Class name for two columns layout with right sidebar</td>
//        </tr>
//        <tr>
//            <th>@layout-class-3columns</th>
//            <td class="vars_value">layout-3</td>
//            <td>Class name for three columns layout with left sidebar</td>
//        </tr>
//        <tr>
//            <th colspan="3" class="vars_section">Variables used for layout grid</th>
//        </tr>
//        <tr>
//            <th>@total-columns</th>
//            <td class="vars_value">12</td>
//            <td>Number of total columns in layout (i.e. <em>1, 2, 3</em>)</td>
//        </tr>
//        <tr>
//            <th>@gutter-width</th>
//            <td class="vars_value">0</td>
//            <td>Distanse between columns</td>
//        </tr>
//        <tr>
//            <th colspan="3" class="vars_section">Variables for layout columns</th>
//        </tr>
//        <tr>
//            <th>@layout-columns-width</th>
//            <td class="vars_value">@total-columns</td>
//            <td>Sets base columns number</td>
//        </tr>
//        <tr>
//            <th>@layout-column-sidebar-width</th>
//            <td class="vars_value">2</td>
//            <td>Sets sidebar width</td>
//        </tr>
//        <tr>
//            <th>@layout-column-left-width</th>
//            <td class="vars_value">@layout-column-sidebar-width</td>
//            <td>Sets left column width</td>
//        </tr>
//        <tr>
//            <th>@layout-column-right-width</th>
//            <td class="vars_value">@layout-column-sidebar-width</td>
//            <td>Sets right column width</td>
//        </tr>
//        <tr>
//            <th colspan="3" class="vars_section">Variables for layout columns depending on layout used</th>
//        </tr>
//        <tr>
//            <th>@layout-column-main-width-1</th>
//            <td class="vars_value">100%</td>
//            <td>Sets one column width</td>
//        </tr>
//        <tr>
//            <th>@layout-column-main-width-2-left</th>
//            <td class="vars_value">@layout-columns-width - @layout-column-left-width</td>
//            <td>Sets left column width</td>
//        </tr>
//        <tr>
//            <th nowrap="nowrap">@layout-column-main-width-2-right</th>
//            <td class="vars_value">@layout-columns-width - @layout-column-right-width</td>
//            <td>Sets right column width</td>
//        </tr>
//        <tr>
//            <th>@layout-column-main-width-3</th>
//            <td class="vars_value">@layout-columns-width - @layout-column-left-width - @layout-column-right-width</td>
//            <td>Sets three columns layout main column width</td>
//        </tr>
//        <tr>
//            <th colspan="3" class="vars_section">Settings variables</th>
//        </tr>
//        <tr>
//            <th>@use-flex</th>
//            <td class="vars_value">false</td>
//            <td>Sets compatibility for browsers not supporting flex</td>
//        </tr>
//        <tr>
//            <th>@responsive</th>
//            <td class="vars_value">true</td>
//            <td>Is set to true if theme has responsive layout</td>
//        </tr>
//    </table>
//  </pre>

//  # Page layouts
//
//  Default properties for page columns are generated using alias mixins:
//
//  <code>#layout-columns</code> - sets columns container
//
//  <code>#layout-columns > .main()</code> - alias for main column
//
//  <code>#layout-columns > .left()</code> - alias for left column
//
//  <code>#layout-columns > .right()</code> - alias for right column
//
//  <code>#layout-columns > .reset()</code> - column width and order reset may be used in RWD
//
//  These aliases use default class names for layouts predefined in vars (i.e. <code>@layout-class-3columns: layout-3</code>) and general column mixin *[<code>.layout-column()</code>](#layout-column)*
//
//  ## Three columns page layout
//
//  ```html
//  <div class="page-wrapper layout-3">
//    <header class="header">Header</header>
//    <section class="page main">
//        <div class="columns">
//            <div class="column main">Main column</div><!--
//         --><div class="column left sidebar">Left column</div><!--
//         --><div class="column right sidebar">Right column</div>
//        </div>
//    </section>
//    <footer class="footer">Footer</footer>
//  </div>
//  ```
//
//  ## Two columns page layout with sidebar on the left
//  ```html
//  <div class="page-wrapper layout-2-left">
//    <header class="header">Header</header>
//    <section class="page main">
//        <div class="columns">
//            <div class="column main">Main column</div><!--
//         --><div class="column left sidebar">Left column</div>
//        </div>
//    </section>
//    <footer class="footer">Footer</footer>
//  </div>
//  ```
//
//  ## Two columns page layout with sidebar on the right
//
//  ```html
//  <div class="page-wrapper layout-2-right">
//    <header class="header">Header</header>
//    <section class="page main">
//        <div class="columns">
//            <div class="column main">Main column</div><!--
//         --><div class="column right sidebar">Right column</div>
//        </div>
//    </section>
//    <footer class="footer">Footer</footer>
//  </div>
//  ```
//
//  ## One column page layout
//
//  ```html
//  <div class="page-wrapper layout-1">
//    <header class="header">Header</header>
//    <section class="page main">
//        <div class="columns">
//            <div class="column main">Main column</div>
//        </div>
//    </section>
//    <footer class="footer">Footer</footer>
//  </div>
//  ```

.columns {
    #layout-columns();
    > .column {
        &:extend(.add-box-sizing all);
        .css(padding-bottom, @indent-xl-base);
    }
}

@media (min-width: 600px) {
    .column.main {
        #layout-columns > .main();
    }

    .column.left {
        #layout-columns > .left();
    }

    .column.right {
        #layout-columns > .right();
    }
}

// # Layout column
//
//  The <code>.layout-column()</code> mixin is used to setup page columns. It configures number, position and width of columns
//
//  3 columns layout example:
//
//  ```html
//  <div class="layout-example-3">
//      <header class="header">Header</header>
//      <section class="page main">
//          <div class="columns">
//              <div class="column main">Main column</div><!--
//           --><div class="column left sidebar">Left column</div><!--
//           --><div class="column right sidebar">Right column</div>
//          </div>
//      </section>
//      <footer class="footer">Footer</footer>
//  </div>
//  ```
//
//  To move main column to the left, change 2nd argument <code>@_order</code> for main and left columns:
//
//  ```less
//  .column.main {
//      .layout-column(3, 1, 60%);
//  }
//  .column.left {
//      .layout-column(3, 2, 20%);
//  }
//  ```
//
//  ```html
//  <div class="layout-example-3-1">
//      <header class="header">Header</header>
//      <section class="page main">
//          <div class="columns">
//              <div class="column main">Main column</div><!--
//           --><div class="column left sidebar">Left column</div><!--
//           --><div class="column right sidebar">Right column</div>
//          </div>
//      </section>
//      <footer class="footer">Footer</footer>
//  </div>
//  ```

.layout-example-3 {
    .column.main {
        .layout-column(3, 2, 60%);
    }
    .column.left {
        .layout-column(3, 1, 20%);
    }
    .column.right {
        .layout-column(3, 3, 20%);
    }
}

.layout-example-3-1 {
    .column.main {
        .layout-column(3, 1, 60%);
    }
    .column.left {
        .layout-column(3, 2, 20%);
    }
    .column.right {
        .layout-column(3, 3, 20%);
    }
}

//  # Layout column variables
//
//  <pre>
//    <table>
//        <tr>
//            <th class="vars_head">Mixin variable</th>
//            <th class="vars_head">Comment</th>
//        </tr>
//        <tr>
//            <th>@_layout-min-width </th>
//            <td>Number of total columns in layout (i.e. <em>1, 2, 3</em>)</td>
//        </tr>
//        <tr>
//            <th>@_order</th>
//            <td>Order of current column</td>
//        </tr>
//        <tr>
//            <th>@_width</th>
//            <td>Width set in css units (<em>20%, 300px, etc.</em>) or in <em>grid columns</em> if unit is not specified. (<em>4</em>)</td>
//        </tr>
//    </table>
//  </pre>


//  # Layout width
//
//  The <code>.layout-width()</code> mixin is used to set default page width of the element the mixin is applyed to. It can be used to set width for the whole page wrapper or for the page elements individualy like header, footer, and so on.

header.header,
footer.footer,
.page.main {
    .layout-width(
    @_layout-min-width: 600px,
    @_layout-max-width: 1000px,
    @_layout-indent: 0
    );
}

//  # Layout width variables
//  <pre>
//    <table>
//        <tr>
//            <th class="vars_head">Mixin variable</th>
//            <th class="vars_head">Variables list names</th>
//            <th class="vars_head">Default value</th>
//            <th class="vars_head">Comment</th>
//        </tr>
//        <tr>
//            <th>@_layout-min-width </th>
//            <td class="vars_value">@layout-min-width</td>
//            <td class="vars_value">1000px</td>
//            <td>Page minimum width</td>
//        </tr>
//        <tr>
//            <th>@_layout-max-width </th>
//            <td class="vars_value">@layout-max-width</td>
//            <td class="vars_value">1280px</td>
//            <td>Page maximum width</td>
//        </tr>
//        <tr>
//            <th>@_layout-indent </th>
//            <td class="vars_value">@layout-indent</td>
//            <td class="vars_value">20px</td>
//            <td>Page indents on the left and right</td>
//        </tr>
//    </table>
//  </pre>
